<template>
  <div class="user-medical-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left-white.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#FFFFFF">我的病历</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="user-medical-container">
      <img mode="aspectFill" class="bg" src="/static/assets/img/int_bg_nor.png"/>
      <div class="user-medical-empty flex-col-v-center" v-if="hospitalCardList.length <= 0">
        <img class="empty-img" src="/static/assets/img/rec_def_nor.png"/>
        <span>没有病历</span>
        <span>创建病历，提高咨询效率</span>
        <div class="flex-center">
          <div class="btn-save" @click="onClickSaveMedical()">创建病历</div>
        </div>
      </div>
      <div class="user-medical-content" v-else>
        <div class="user-medical-list">
          <div class="list-top flex-row-space-between">
            <span>病历列表</span>
            <!--<img src="/static/assets/img/rec_icon2_add2_nor.png" @click="onClickSaveMedical()"/>-->
          </div>
          <swiper style="margin-top: 20px" :display-multiple-items="5">
            <swiper-item v-for="item in hospitalCardList" :key="item">
              <block v-if="item.date > 0">
                <div class="item flex-col-center"
                     @click="selectHospitalCard(item)"
                     :class="{'selected': selectedHospitalCard.hospital_card.id == item.hospital_card.id}">
                  <div class="date bg-orange" v-if="item.processDay < 10">{{item.processDay}}</div>
                  <div class="date bg-green" v-else-if="item.processDay < 20">{{item.processDay}}</div>
                  <div class="date bg-blue" v-else>{{item.processDay}}</div>
                  <div class="year-month">{{item.processDate}}</div>
                </div>
              </block>
            </swiper-item>
          </swiper>
        </div>
        <div class="user-medical-detail">
          <div class="detail-top flex-center">
            <div class="flex-center">
              <div class="point"></div>
              <span>联系电话:{{selectedHospitalCard.hospital_card.contact}}</span>
            </div>
            <div class="flex-center" style="margin-left:24px">
              <div class="point"></div>
              <span>就诊时间：{{selectedHospitalCard.processVisitTime}}</span>
            </div>
          </div>
          <div class="detail-name flex-center">
            <span>{{selectedHospitalCard.hospital_card.name}}</span>
          </div>
          <div class="detail-attr flex-row">
            <div class="left flex-1">
              <div class="item flex-row-v-center">
                <div class="rect"></div>
                <div class="name">性别:</div>
                <div class="value flex-1">{{selectedHospitalCard.processGender}}</div>
              </div>
              <div class="item flex-row-v-center" style="margin-top: 20px">
                <div class="rect"></div>
                <div class="name">体重:</div>
                <div class="value flex-1">{{selectedHospitalCard.hospital_card.body_weight}}</div>
              </div>
              <div class="item flex-row-v-center" style="margin-top: 20px">
                <div class="rect"></div>
                <div class="name">所在地:</div>
                <div class="value flex-1">{{selectedHospitalCard.hospital_card.address}}</div>
              </div>
              <div class="item flex-row-v-center" style="margin-top: 20px">
                <div class="rect"></div>
                <div class="name">病情描述:</div>
                <div class="value flex-1"></div>
              </div>
            </div>
            <div class="line"></div>
            <div class="right flex-1">
              <div class="item flex-row-v-center">
                <div class="rect"></div>
                <div class="name">年龄:</div>
                <div class="value flex-1">23</div>
              </div>
              <div class="item flex-row-v-center" style="margin-top: 20px">
                <div class="rect"></div>
                <div class="name">身高:</div>
                <div class="value flex-1">{{selectedHospitalCard.hospital_card.body_height}}</div>
              </div>
              <div class="item flex-row-v-center" style="margin-top: 20px">
                <div class="rect"></div>
                <div class="name">过敏史:</div>
                <div class="value flex-1">{{selectedHospitalCard.hospital_card.anaphylaxis ? '有' : '无'}}</div>
              </div>
            </div>
          </div>
          <div class="detail-desc">
            {{selectedHospitalCard.hospital_card.description}}
          </div>
          <div class="line-bottom"></div>
          <div class="flex-center" style="margin-bottom: 10px;">
            <div class="btn-save" @click="onClickSaveMedical()">新增</div>
            <!--<div class="btn-save" @click="onClickSaveMedical(selectedHospitalCard)">编辑</div>-->
            <div class="btn-save" @click="onClickViewMedical(selectedHospitalCard)">查看</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {},

    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        opacity: 'rgba(104,221,237,0)',

        hospitalCardList: [],
        selectedHospitalCard: {}
      }
    },
    onLoad () {
      this._getHospitalCardList((res) => {
        let hospitalCardList = res.hospital_card_list
        hospitalCardList.forEach(v => {
          v.processDate = Core.Util.timeFormat(v.date, 'Y-m')
          v.processDay = Core.Util.timeFormat(v.date, 'd')
          v.processVisitTime = Core.Util.timeFormat(v.hospital_card.visit_time, 'Y-m-d')
          v.processCreateTime = Core.Util.timeFormat(v.hospital_card.create_time, 'Y-m-d')
          v.processGender = Core.Const.GENDER_TYPE[v.hospital_card.gender]
        })

        if (hospitalCardList.length <= 0) {
          hospitalCardList = []
        } else {
          if (hospitalCardList.length < 5) {
            let count = 5 - hospitalCardList.length
            for (let i = 0; i < count; i++) {
              hospitalCardList.push([])
            }
          }
        }

        this.hospitalCardList = hospitalCardList
        if (this.hospitalCardList.length) {
          this.selectedHospitalCard = this.hospitalCardList[0]
        } else {
          this.selectedHospitalCard = {}
        }
      })
      Core.Event.on('save_hospital_card', (id) => {
        this._getHospitalCardList((res) => {
          let hospitalCardList = res.hospital_card_list
          hospitalCardList.forEach(v => {
            v.processDate = Core.Util.timeFormat(v.date, 'Y-m')
            v.processDay = Core.Util.timeFormat(v.date, 'd')
            v.processVisitTime = Core.Util.timeFormat(v.hospital_card.visit_time, 'Y-m-d')
            v.processCreateTime = Core.Util.timeFormat(v.hospital_card.create_time, 'Y-m-d')
            v.processGender = Core.Const.GENDER_TYPE[v.hospital_card.gender]
          })

          if (hospitalCardList.length <= 0) {
            hospitalCardList = []
          } else {
            if (hospitalCardList.length < 5) {
              let count = 5 - hospitalCardList.length
              for (let i = 0; i < count; i++) {
                hospitalCardList.push([])
              }
            }
          }

          this.hospitalCardList = hospitalCardList
          if (hospitalCardList.length) {
            if (id) {
              let hospitalCardList = this.hospitalCardList
              hospitalCardList.forEach(v => {
                if (v['hospital_card'] && v['hospital_card']['id'] == id) {
                  this.selectedHospitalCard = v
                }
              })
            } else {
              // this.selectedHospitalCard = this.hospitalCardList[hospitalCardList.length - 1]
              this.selectedHospitalCard = this.hospitalCardList[0]
            }
          } else {
            this.selectedHospitalCard = {}
          }
        })
      })
    },

    methods: {
      selectHospitalCard (item) {
        this.selectedHospitalCard = item
      },

      onClickGoPage (page) {
        Common.go(`/pages/${page}/main`)
      },

      // onClickSaveMedical (item) {
      //   let id = item ? item.hospital_card.id : 0
      //   Common.go('/pages/我的病历/创建/main?id=' + id)
      // },

      onClickSaveMedical () {
        Common.go('/pages/我的病历/创建/main?id=0')
      },

      onClickViewMedical (item) {
        let id = item ? item.hospital_card.id : 0
        Common.go('/pages/我的病历/创建/main?id=' + id)
      },

      onClickGoBack () {
        Core.Util.goBack()
      },

      _getHospitalCardList (callback) {
        Core.Api.HospitalCard.getHospitalCardList()
          .then(res => {
            callback(res)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    },
    onPageScroll (e) {
      if (e.scrollTop > 100) {
        this.opacity = `rgba(104,221,237, 1)`
        return
      }
      this.opacity = `rgba(104,221,237, ${e.scrollTop / 100})`
    }
  }
</script>

<style lang="scss">
  page {
    background: #F5F5F5;
  }

  .user-medical-page {
    width: 100%;
    height: 100%;
    position: relative;
    background: #F5F5F5;

    .user-medical-container {
      width: 100%;

      .bg {
        width: 100%;
        height: 156px;
      }

      .user-medical-empty {
        position: absolute;
        top: 70px;
        left: 12px;
        right: 12px;
        bottom: 19px;
        background: #FFFFFF;
        border-radius: 10px;

        .empty-img {
          width: 190px;
          height: 126px;
          margin-top: 136px;
        }
        span {
          color: #545454;
          font-size: 16px;
          margin-top: 38px;
        }
        span + span {
          color: #939393;
          font-size: 12px;
          font-weight: 300;
          margin-top: 5px;
        }
        .btn-save {
          width: 119px;
          height: 37px;
          margin-top: 24px;
          color: #FFFFFF;
          font-size: 16px;
          border-radius: 18px;
          text-align: center;
          line-height: 37px;
          background: linear-gradient(to right, #84C5FD, #65DEEB);
        }
      }

      .user-medical-content {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 70px;

        .user-medical-list {
          width: 100%;
          height: 134px;
          background: #FFFFFF;
          border-radius: 10px;

          .list-top {
            width: 100%;
            padding-left: 21px;
            padding-right: 17px;
            padding-top: 17px;

            span {
              font-size: 16px;
              font-weight: 300;
              color: #313131;
            }
            img {
              width: 23px;
              height: 23px;
            }
          }

          .item {
            width: 80px;
            .date {
              width: 41px;
              height: 41px;
              border-radius: 21px;
              text-align: center;
              line-height: 41px;
              color: #FFFFFF;
              &.bg-orange {
                background: rgba(244, 101, 98, .5);
              }
              &.bg-green {
                background: rgba(67, 191, 103, .5);
              }
              &.bg-blue {
                background: rgba(61, 156, 224, .5);
              }
            }

            &.selected {
              .date {
                font-size: 17px;
                font-weight: 500;
                &.bg-orange {
                  background: rgba(244, 101, 98, 1);
                }
                &.bg-green {
                  background: rgba(67, 191, 103, 1);
                }
                &.bg-blue {
                  background: rgba(61, 156, 224, 1);
                }
              }
            }

            .year-month {
              font-size: 12px;
              color: #939393;
              margin-top: 10px;
              font-weight: 300;
            }
          }


        }
      }

      .user-medical-detail {
        margin-top: 10px;
        border-radius: 10px;
        min-height: 200px;
        background: #FFFFFF;

        .detail-top {
          padding-top: 20px;

          .point {
            width: 9px;
            height: 9px;
            background: #FF8989;
            border-radius: 4.5px;
          }

          span {
            font-size: 12px;
            color: #939393;
            margin-left: 10px;
          }
        }

        .detail-name {
          margin-top: 47px;
          span {
            font-weight: 500;
            font-size: 24px;
            color: #313131;
          }
        }

        .detail-attr {
          width: 100%;
          margin-top: 17px;

          .left {
            padding-left: 20px;
          }
          .right {
            padding-left: 20px;
          }
          .item {
            .rect {
              width: 22px;
              height: 9px;
              margin-top: -4px;
              background: #74B9F5;
              box-shadow: 1px 1px 1px #74B9F5;
            }
            .name {
              color: #939393;
              font-size: 14px;
              margin-left: 10px;
            }
            .value {
              color: #313131;
              font-size: 14px;
              font-weight: 300;
              margin-left: 10px;
            }
          }
          .line {
            width: 1px;
            height: 49px;
            background: #D8D8D8;
          }
        }

        .detail-desc {
          padding-left: 27px;
          padding-right: 27px;
          font-size: 12px;
          color: #313131;
          margin-top: 21px;
        }
      }

      .line-bottom {
        width: calc(100% - 40px);
        margin-left: 20px;
        height: 1px;
        background: #F4F4F4;
        margin-top: 17px;
      }

      .btn-save {
        width: 119px;
        height: 37px;
        margin-top: 38px;
        margin-bottom: 33px;
        color: #FFFFFF;
        font-size: 16px;
        border-radius: 18px;
        text-align: center;
        line-height: 37px;
        background: linear-gradient(to right, #84C5FD, #65DEEB);
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }

    }

  }
</style>
